(function () {
  let slideBox = document.querySelector(".mainContainer .swiper-wrapper");
  let mainItemWrapRight = document.querySelector(
    ".mainContainer .main_itemWrapRight"
  );
  let mainItemWrapBottom = document.querySelector(
    ".mainContainer .main_itemWrapBottom"
  );
  let imgBoxs = null;

  function getData() {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "data.json", false);
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        data = JSON.parse(xhr.response);
      }
    };
    xhr.send();
  }
  getData();

  // 数据渲染（轮播图和卡片）
  function render(data) {
    // 轮播图渲染
    let str = "";
    data[0].swiper.forEach((item) => {
      str += `<div class="swiper-slide">
            <a href="">
              <div class="imgWrap">
                <picture>
                  <img src="${item.pic}" alt="">
                </picture>
              </div>
              <div class="textWrap"><span>${item.text}</span></div>
              <div class="mask" style="background-color:${item.maskBgColor}"></div>
            </a>
          </div>`;
      slideBox.innerHTML = str;
      // 轮播图功能
      var mySwiper = new Swiper(".swiper", {
        loop: true,
        autoplay: {
          delay: 3000,
          disableOnInteraction: false,
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
          bulletActiveClass: "my-bullet-active",
          bulletClass: "my-bullet",
        },

        // 如果需要前进后退按钮
        navigation: {
          nextEl: ".button-next",
          prevEl: ".button-prev",
        },
      });
    });

    // 卡片渲染
    let str2 = "";
    data[1].card1.forEach((item) => {
      str2 += `<div class="main_item">
        <div class="itemWrap">
          <a href="" class="contentsBox">
            <div class="contents">                   
               <div class="plyaerIcon"></div>                
               <picture><img src="${
                 item.pic
               }" alt=""></picture>                    
               <div class="videoWrap" display="none"></div> 
            </div>               
            <div class="bottomIconWrap">
              <div class="iconBox">
                <div class="iconLeft">
                  <span class="playcount">
                  <span class="iconfont icon-bofang"></span>
                    <span>${item.playcount}</span>
                  </span>
                  <span class="comments">
                    <span class="iconfont icon-danmu1"></span>
                    <span>${item.comments}</span>
                  </span>
                </div>
                <span class="itemDuration">${item.time}</span>
              </div>
              </div>       
          </a>             
          <div class="titleBox">
            <h3 class="title">
              <a href="">${item.title}</a>
            </h3>
            <div class="bottomInfo">
              ${item.sptext ? `<div class="sptext">${item.sptext}</div>` : ""}
              <a href="" class="personInfo">
              ${item.sptext ? "" : `<span class="iconfont icon-UPzhu"></span>`}
                <span class="author">${item.author}</span>
                ${item.date ? `<span class="date">${item.date}</span>` : ""}
              </a>
            </div>
          </div>
        </div>
      </div>`;
      mainItemWrapRight.innerHTML = str2;
    });

    // 卡片渲染
    let str3 = "";
    data[2].card2.forEach((item, index) => {
      if ((index + 1) % 5 !== 0) {
        str3 = `<div class="main_item">
        <div class="itemWrap">
          <a href="" class="contentsBox">
            <div class="contents">                   
               <div class="plyaerIcon"></div>                
               <picture class="imgBox"><img src="" data-src="${
                 item.pic
               }" alt=""></picture>                    
               <div class="videoWrap" display="none"></div> 
            </div>               
            <div class="bottomIconWrap">
              <div class="iconBox">
                <div class="iconLeft">
                  <span class="playcount">
                  <span class="iconfont icon-bofang"></span>
                    <span>${item.playcount}</span>
                  </span>
                  <span class="comments">
                  <span class="iconfont icon-danmu1"></span>
                    <span>${item.comments}</span>
                  </span>
                </div>
                <span class="itemDuration">${item.time}</span>
              </div>
              </div>       
          </a>             
          <div class="titleBox">
            <h3 class="title">
              <a href="">${item.title}</a>
            </h3>
            <div class="bottomInfo">
            ${item.sptext ? `<div class="sptext">${item.sptext}</div>` : ""}
              <a href="" class="personInfo">
              ${item.sptext ? "" : `<span class="iconfont icon-UPzhu"></span>`}
                <span class="author">${item.author}</span>
                ${item.date ? `<span class="date">${item.date}</span>` : ""}
              </a>
            </div>
          </div>
        </div>
      </div>`;
      } else {
        str3 = ` <div class="main_spitem">
        <div class="spitemWrap">
          <div class="spitemInner">
            <div class="coverWrap">
              <a href="">
                <div class="pictureWrap">
                  <picture class="imgBox">
                    <img src="" data-src="${item.pic}" alt="">
                  </picture>
                </div>
                <div class="badgeWrap">
                 ${item.badgesvg}
                  <span>${item.badgetext}</span>
                </div>
                <div class="bottomIconWrap">
                  <div class="iconBox">
                    <div class="iconBoxLeft">
                      <span class="onlinecount">
                       ${
                         item.onlinecount
                           ? ` <span class="iconfont icon-yanjing"></span>`
                           : ""
                       }
                        ${
                          item.onlinecount
                            ? `<span>${item.onlinecount}</span>`
                            : ""
                        }
                      </span>
                      <span class="playcount">
                        ${
                          item.playcount
                            ? `<span class="iconfont icon-bofang"></span>`
                            : ""
                        }
                        ${
                          item.playcount ? `<span>${item.playcount}</span>` : ""
                        }
                      </span>
                      <span class="like">
                      ${
                        item.like
                          ? `<span class="iconfont icon-aixin"></span>`
                          : ""
                      }
                        ${item.like ? `<span>${item.like}</span>` : ""}
                      </span>
                    </div>
                    ${
                      item.livelabel
                        ? ` <div class="iconBoxright">${item.livelabel}</div>`
                        : ""
                    }
                  </div>
                </div>
              </a>
            </div>

            <div class="titleWrap">
              <div class="titleText">
                <a href="">
                ${
                  item.livetext
                    ? ` <div class="living">
                <img src="images/live.gif" alt="" style="width:12px;height: 12px">
                <span>${item.livetext}</span>
              </div>`
                    : ""
                }
                  <span class="title">${item.title}</span>
                </a>
              </div>
              <div class="titleInfo">
                <a href="">
                  ${
                    item.author
                      ? `<span class="iconfont icon-UPzhu"></span>`
                      : ""
                  }
                  ${
                    item.info
                      ? `<span class="info">${item.info}</span>`
                      : `<span class="info">${item.author}</span>`
                  }
                </a>
              </div>
            </div>
          <div class="layer"></div>
          <div class="layertiny"></div>
        </div>
      </div>
    </div>
     </div>`;
      }
      mainItemWrapBottom.innerHTML += str3;
    });
    imgBoxs = document.querySelectorAll(".main_itemWrapBottom .imgBox");
  }
  render(data);

  // 懒加载效果
  imgBoxs = Array.from(imgBoxs);
  function handle() {
    function showimg(img) {
      var dataSrc = img.getAttribute("data-src");
      var newimg = new Image();
      newimg.src = dataSrc;

      newimg.onload = function () {
        img.src = dataSrc;
        newimg = null;
        img.succeed = true;
      };
    }

    let ob = new IntersectionObserver(
      (changes) => {
        changes.forEach((item) => {
          if (item.isIntersecting) {
            let img = item.target.querySelector("img");
            if (img.succeed) {
              ob.unobserve(item.target);
              return;
            }
            showimg(img);
          }
        });
      },
      {
        threshold: [0.5],
      }
    );

    imgBoxs.forEach((item) => {
      ob.observe(item);
    });
  }
  handle();

  // 加载更多
  var count = 0;
  var loadmore = document.getElementById("loadmore");
  /* console.log(loadmore); */
  function loadmoreimg() {
    var obload = new IntersectionObserver(
      (changes) => {
        /*   console.log(changes[0].isIntersecting); */
        if (changes[0].isIntersecting) {
          count++;
          if (count > 4) {
            obload.unobserve(loadmore);
            loadmore.innerHTML = "加载已完成";
            return;
          }
          getData();
          render(data);
          handle();
        }
      },
      {
        threshold: [1],
      }
    );

    obload.observe(loadmore);
  }

  loadmoreimg();

  // 返回顶部
  let backTop = document.querySelector(".backTop");
  let html = document.documentElement || document.body;
  window.onscroll = function () {
    console.log(html.scrollTop);
    if (html.scrollTop > 200) {
      backTop.style.opacity = 1;
      backTop.style.zIndex = 9999;
    } else {
      backTop.style.opacity = 0;
      backTop.style.zIndex = -9999;
    }
  };
})();

// 顶部导航左侧的隐藏盒子
let navLiveBtn = document.getElementById("livebtn");
let navLiveWrap = document.querySelector(".topContainer .nav_liveWrap");
let navLiveExtend = document.querySelector(
  ".topContainer .nav_liveWrap .liveExtend"
);

navLiveBtn.onmouseenter = function () {
  navLiveExtend.style.display = "block";
};
navLiveWrap.onmouseleave = function () {
  navLiveExtend.style.display = "none";
};

let navGameBtn = document.getElementById("gamebtn");
let navGameWrap = document.querySelector(".topContainer .nav_gameWrap");
let gameExtendWrap = document.querySelector(
  ".topContainer .nav_gameWrap .gameExtendWrap"
);

navGameBtn.onmouseenter = function () {
  gameExtendWrap.style.display = "block";
};
navGameWrap.onmouseleave = function () {
  gameExtendWrap.style.display = "none";
};

let navComicBtn = document.getElementById("comicbtn");
let navComicWrap = document.querySelector(".topContainer .nav_comicWrap");
let comicExtendWrap = document.querySelector(".topContainer .comicExtend");

navComicBtn.onmouseenter = function () {
  comicExtendWrap.style.display = "block";
};
navComicWrap.onmouseleave = function () {
  comicExtendWrap.style.display = "none";
};

let navDownloadBtn = document.getElementById("downloadbtn");
let navDownloadWrap = document.querySelector(".topContainer .nav_downloadWrap");
let downloadExtend = document.querySelector(".topContainer .downloadExtend");

navDownloadBtn.onmouseenter = function () {
  downloadExtend.style.display = "block";
};
navDownloadWrap.onmouseleave = function () {
  downloadExtend.style.display = "none";
};

// 顶部搜索栏
let searchinp = document.getElementById("searchinp");
let searchContent = document.getElementById("searchContent");
let searchform = document.getElementById("searchform");
let searchExtend = document.getElementById("searchExtend");
let searchWrap = document.getElementById("searchWrap");

searchinp.onfocus = function () {
  searchExtend.style.display = "block";
  searchContent.style.backgroundColor = "#e3e5e7";
  searchform.style.borderRadius = "8px 8px 0 0";
  searchform.style.backgroundColor = "#fff";
  searchform.style.opacity = 0.9;

  searchinp.onmouseenter = function () {
    searchform.style.opacity = 1;
  };
  searchinp.onmouseleave = function () {
    searchform.style.opacity = 0.9;
  };
};
searchWrap.onmouseleave = function () {
  searchinp.onblur = function () {
    searchExtend.style.display = "none";
    searchform.style.borderRadius = "8px";
    searchContent.style.backgroundColor = "";
  };
};

// 顶部导航右侧的隐藏盒子
let avatarbtn = document.getElementById("avatarbitn");

let avatarimg = avatarbtn.querySelector("img");

let avatarWrap = document.querySelector(
  ".topContainer .headerbar_right_avatarWrap"
);
let avatarExtend = document.querySelector(
  ".topContainer .headerbar_right_avatarWrap .headerbar_right_userInforWrap"
);
avatarbtn.onmouseenter = function () {
  avatarExtend.style.display = "block";
  avatarimg.style.transform = "scale(2.41)";
  avatarimg.style.left = "16px";
  avatarimg.style.zIndex = "22";
  avatarimg.style.borderWidth = "1px";
};
avatarWrap.onmouseleave = function () {
  avatarExtend.style.display = "none";
  avatarimg.style.transform = "scale(1)";
  avatarimg.style.left = "0px";
  avatarimg.style.zIndex = "0";
  avatarimg.style.borderWidth = "2px";
};

let vipbtn = document.getElementById("vipbtn");
let majorVipWrap = document.querySelector(".topContainer .majorVipWrap");
let vipExtend = document.querySelector(
  ".topContainer .majorVipWrap .vipExtend"
);
vipbtn.onmouseenter = function () {
  vipExtend.style.display = "block";
};
majorVipWrap.onmouseleave = function () {
  vipExtend.style.display = "none";
};

let messagebtn = document.getElementById("messagebtn");
let messageWrap = document.querySelector(".topContainer .messageWrap");
let messageExtend = document.querySelector(
  ".topContainer .messageWrap .messageExtend"
);
messagebtn.onmouseenter = function () {
  messageExtend.style.display = "block";
};
messageWrap.onmouseleave = function () {
  messageExtend.style.display = "none";
};

let dynamicbtn = document.getElementById("dynamicbtn");
let dynamicWrap = document.querySelector(".topContainer .dynamicWrap");
let dynamicExtend = document.querySelector(".topContainer .dynamicExtend");
dynamicbtn.onmouseenter = function () {
  dynamicExtend.style.display = "block";
};
dynamicWrap.onmouseleave = function () {
  dynamicExtend.style.display = "none";
};

let DBtn = document.querySelectorAll(
  ".topContainer .dynamicExtend .dynamicBtnWrap .DBtn"
);
let dynamicCard = document.querySelectorAll(
  ".topContainer .dynamicExtend .dynamicCard"
);

function changeTab(clickIndex) {
  for (var i = 0; i < DBtn.length; i++) {
    DBtn[i].classList.remove("active");
    dynamicCard[i].classList.remove("active");
  }
  DBtn[clickIndex].classList.add("active");
  dynamicCard[clickIndex].classList.add("active");
}

for (let i = 0; i < DBtn.length; i++) {
  DBtn[i].onclick = function () {
    changeTab(i);
  };
}

let collectionbtn = document.getElementById("collectionbtn");
let collectionWrap = document.querySelector(".topContainer .collectionWrap");
let collectionExtend = document.querySelector(
  ".topContainer .collectionExtend"
);
collectionbtn.onmouseenter = function () {
  collectionExtend.style.display = "block";
};
collectionWrap.onmouseleave = function () {
  collectionExtend.style.display = "none";
};

let navList = document.querySelectorAll(
  ".topContainer .collectionExtend .navWrap .navbtn"
);
let tabList = document.querySelectorAll(
  ".topContainer .collectionExtend .tabWrap .tab"
);

function changeTab2(clickIndex) {
  for (var i = 0; i < navList.length; i++) {
    navList[i].classList.remove("active");
    tabList[i].classList.remove("active");
  }
  navList[clickIndex].classList.add("active");
  tabList[clickIndex].classList.add("active");
}
for (let i = 0; i < navList.length; i++) {
  navList[i].onclick = function () {
    changeTab2(i);
  };
}

// 中部导航：番剧
let channelAnime = document.getElementById("channelAnime");
let animeWrap = document.querySelector(
  ".topContainer .headerchannel .animeWrap"
);
let exdAnime = document.querySelector(".topContainer .headerchannel .exdanime");
let exdItemAnime = exdAnime.querySelectorAll(".exdItem");

channelAnime.onmouseenter = function () {
  exdAnime.style.display = "block";
  channelAnime.style.backgroundColor = "#e3e5e7";
};
animeWrap.onmouseleave = function () {
  exdAnime.style.display = "none";
  channelAnime.style.backgroundColor = "#f6f7f8";
};
for (var i = 0; i < exdItemAnime.length; i++) {
  exdItemAnime[i].onmouseenter = function () {
    this.style.backgroundColor = "#e3e5e7";
  };
  exdItemAnime[i].onmouseleave = function () {
    this.style.backgroundColor = "#fff";
  };
}

// 中部导航：国创
let channelLocalAnime = document.getElementById("channelLocalAnime");
let localanimeWrap = document.querySelector(
  ".topContainer .headerchannel .localanimeWrap"
);
let exdLocalAnime = document.querySelector(
  ".topContainer .headerchannel .exdlocalanime"
);
let exdItemLocalAnime = exdLocalAnime.querySelectorAll(".exdItem");

channelLocalAnime.onmouseenter = function () {
  exdLocalAnime.style.display = "block";
  channelLocalAnime.style.backgroundColor = "#e3e5e7";
};
localanimeWrap.onmouseleave = function () {
  exdLocalAnime.style.display = "none";
  channelLocalAnime.style.backgroundColor = "#f6f7f8";
};
for (var i = 0; i < exdItemLocalAnime.length; i++) {
  exdItemLocalAnime[i].onmouseenter = function () {
    this.style.backgroundColor = "#e3e5e7";
  };
  exdItemLocalAnime[i].onmouseleave = function () {
    this.style.backgroundColor = "#fff";
  };
}

// 中部导航：动画
let channelCartoon = document.getElementById("channelCartoon");
let cartoonWrap = document.querySelector(
  ".topContainer .headerchannel .cartoonWrap"
);
let exdcartoon = document.querySelector(
  ".topContainer .headerchannel .exdcartoon"
);
let exdItemcartoon = exdcartoon.querySelectorAll(".exdItem");

channelCartoon.onmouseenter = function () {
  exdcartoon.style.display = "block";
  channelCartoon.style.backgroundColor = "#e3e5e7";
};
cartoonWrap.onmouseleave = function () {
  exdcartoon.style.display = "none";
  channelCartoon.style.backgroundColor = "#f6f7f8";
};
for (var i = 0; i < exdItemcartoon.length; i++) {
  exdItemcartoon[i].onmouseenter = function () {
    this.style.backgroundColor = "#e3e5e7";
  };
  exdItemcartoon[i].onmouseleave = function () {
    this.style.backgroundColor = "#fff";
  };
}

// 中部导航：鬼畜
let channelGhost = document.getElementById("channelGhost");
let ghostWrap = document.querySelector(
  ".topContainer .headerchannel .ghostWrap"
);
let exdghost = document.querySelector(".topContainer .headerchannel .exdghost");
let exdItemghost = exdghost.querySelectorAll(".exdItem");

channelGhost.onmouseenter = function () {
  exdghost.style.display = "block";
  channelGhost.style.backgroundColor = "#e3e5e7";
};
ghostWrap.onmouseleave = function () {
  exdghost.style.display = "none";
  channelGhost.style.backgroundColor = "#f6f7f8";
};
for (var i = 0; i < exdItemghost.length; i++) {
  exdItemghost[i].onmouseenter = function () {
    this.style.backgroundColor = "#e3e5e7";
  };
  exdItemghost[i].onmouseleave = function () {
    this.style.backgroundColor = "#fff";
  };
}

// 中部导航：舞蹈
let channelDance = document.getElementById("channelDance");
let danceWrap = document.querySelector(
  ".topContainer .headerchannel .danceWrap"
);
let exddance = document.querySelector(".topContainer .headerchannel .exddance");
let exdItemdance = exddance.querySelectorAll(".exdItem");

channelDance.onmouseenter = function () {
  exddance.style.display = "block";
  channelDance.style.backgroundColor = "#e3e5e7";
};
danceWrap.onmouseleave = function () {
  exddance.style.display = "none";
  channelDance.style.backgroundColor = "#f6f7f8";
};
for (var i = 0; i < exdItemdance.length; i++) {
  exdItemdance[i].onmouseenter = function () {
    this.style.backgroundColor = "#e3e5e7";
  };
  exdItemdance[i].onmouseleave = function () {
    this.style.backgroundColor = "#fff";
  };
}

// 中部导航：娱乐
let channelEntertainment = document.getElementById("channelEntertainment");
let entertainmentWrap = document.querySelector(
  ".topContainer .headerchannel .entertainmentWrap"
);
let exdentertainment = document.querySelector(
  ".topContainer .headerchannel .exdentertainment"
);
let exdItementertainment = exdentertainment.querySelectorAll(".exdItem");

channelEntertainment.onmouseenter = function () {
  exdentertainment.style.display = "block";
  channelEntertainment.style.backgroundColor = "#e3e5e7";
};
entertainmentWrap.onmouseleave = function () {
  exdentertainment.style.display = "none";
  channelEntertainment.style.backgroundColor = "#f6f7f8";
};
for (var i = 0; i < exdItementertainment.length; i++) {
  exdItementertainment[i].onmouseenter = function () {
    this.style.backgroundColor = "#e3e5e7";
  };
  exdItementertainment[i].onmouseleave = function () {
    this.style.backgroundColor = "#fff";
  };
}

// 中部导航：科技
let channelTech = document.getElementById("channelTech");
let techWrap = document.querySelector(".topContainer .headerchannel .techWrap");
let exdtech = document.querySelector(".topContainer .headerchannel .exdtech");
let exdItemtech = exdtech.querySelectorAll(".exdItem");

channelTech.onmouseenter = function () {
  exdtech.style.display = "block";
  channelTech.style.backgroundColor = "#e3e5e7";
};
techWrap.onmouseleave = function () {
  exdtech.style.display = "none";
  channelTech.style.backgroundColor = "#f6f7f8";
};
for (var i = 0; i < exdItemtech.length; i++) {
  exdItemtech[i].onmouseenter = function () {
    this.style.backgroundColor = "#e3e5e7";
  };
  exdItemtech[i].onmouseleave = function () {
    this.style.backgroundColor = "#fff";
  };
}

// 中部导航：美食
let channelFood = document.getElementById("channelFood");
let foodWrap = document.querySelector(".topContainer .headerchannel .foodWrap");
let exdfood = document.querySelector(".topContainer .headerchannel .exdfood");
let exdItemfood = exdfood.querySelectorAll(".exdItem");

channelFood.onmouseenter = function () {
  exdfood.style.display = "block";
  channelFood.style.backgroundColor = "#e3e5e7";
};
foodWrap.onmouseleave = function () {
  exdfood.style.display = "none";
  channelFood.style.backgroundColor = "#f6f7f8";
};
for (var i = 0; i < exdItemfood.length; i++) {
  exdItemfood[i].onmouseenter = function () {
    this.style.backgroundColor = "#e3e5e7";
  };
  exdItemfood[i].onmouseleave = function () {
    this.style.backgroundColor = "#fff";
  };
}

// 中部导航：汽车
let channelCar = document.getElementById("channelCar");
let carWrap = document.querySelector(".topContainer .headerchannel .carWrap");
let exdcar = document.querySelector(".topContainer .headerchannel .exdcar");
let exdItemcar = exdcar.querySelectorAll(".exdItem");

channelCar.onmouseenter = function () {
  exdcar.style.display = "block";
  channelCar.style.backgroundColor = "#e3e5e7";
};
carWrap.onmouseleave = function () {
  exdcar.style.display = "none";
  channelCar.style.backgroundColor = "#f6f7f8";
};
for (var i = 0; i < exdItemcar.length; i++) {
  exdItemcar[i].onmouseenter = function () {
    this.style.backgroundColor = "#e3e5e7";
  };
  exdItemcar[i].onmouseleave = function () {
    this.style.backgroundColor = "#fff";
  };
}

// 中部导航：运动
let channelSport = document.getElementById("channelSport");
let sportWrap = document.querySelector(
  ".topContainer .headerchannel .sportWrap"
);
let exdsport = document.querySelector(".topContainer .headerchannel .exdsport");
let exdItemsport = exdsport.querySelectorAll(".exdItem");

channelSport.onmouseenter = function () {
  exdsport.style.display = "block";
  channelSport.style.backgroundColor = "#e3e5e7";
};
sportWrap.onmouseleave = function () {
  exdsport.style.display = "none";
  channelSport.style.backgroundColor = "#f6f7f8";
};
for (var i = 0; i < exdItemsport.length; i++) {
  exdItemsport[i].onmouseenter = function () {
    this.style.backgroundColor = "#e3e5e7";
  };
  exdItemsport[i].onmouseleave = function () {
    this.style.backgroundColor = "#fff";
  };
}

// 中部导航：游戏
let channelGame = document.getElementById("channelGame");
let gameWrap = document.querySelector(".topContainer .headerchannel .gameWrap");
let exdgame = document.querySelector(".topContainer .headerchannel .exdgame");
let exdItemgame = exdgame.querySelectorAll(".exdItem");

channelGame.onmouseenter = function () {
  exdgame.style.display = "block";
  channelGame.style.backgroundColor = "#e3e5e7";
};
gameWrap.onmouseleave = function () {
  exdgame.style.display = "none";
  channelGame.style.backgroundColor = "#f6f7f8";
};
for (var i = 0; i < exdItemgame.length; i++) {
  exdItemgame[i].onmouseenter = function () {
    this.style.backgroundColor = "#e3e5e7";
  };
  exdItemgame[i].onmouseleave = function () {
    this.style.backgroundColor = "#fff";
  };
}

// 中部导航：音乐
let channelMusic = document.getElementById("channelMusic");
let musicWrap = document.querySelector(
  ".topContainer .headerchannel .musicWrap"
);
let exdmusic = document.querySelector(".topContainer .headerchannel .exdmusic");
let exdItemmusic = exdmusic.querySelectorAll(".exdItem");

channelMusic.onmouseenter = function () {
  exdmusic.style.display = "block";
  channelMusic.style.backgroundColor = "#e3e5e7";
};
musicWrap.onmouseleave = function () {
  exdmusic.style.display = "none";
  channelMusic.style.backgroundColor = "#f6f7f8";
};
for (var i = 0; i < exdItemmusic.length; i++) {
  exdItemmusic[i].onmouseenter = function () {
    this.style.backgroundColor = "#e3e5e7";
  };
  exdItemmusic[i].onmouseleave = function () {
    this.style.backgroundColor = "#fff";
  };
}
// 中部导航：影视
let channelMovie = document.getElementById("channelMovie");
let movieWrap = document.querySelector(
  ".topContainer .headerchannel .movieWrap"
);
let exmovie = document.querySelector(".topContainer .headerchannel .exmovie");
let exdItemmovie = exmovie.querySelectorAll(".exdItem");

channelMovie.onmouseenter = function () {
  exmovie.style.display = "block";
  channelMovie.style.backgroundColor = "#e3e5e7";
};
movieWrap.onmouseleave = function () {
  exmovie.style.display = "none";
  channelMovie.style.backgroundColor = "#f6f7f8";
};
for (var i = 0; i < exdItemmovie.length; i++) {
  exdItemmovie[i].onmouseenter = function () {
    this.style.backgroundColor = "#e3e5e7";
  };
  exdItemmovie[i].onmouseleave = function () {
    this.style.backgroundColor = "#fff";
  };
}

// 中部导航：知识
let channelKnowledge = document.getElementById("channelKnowledge");
let knowledgeWrap = document.querySelector(
  ".topContainer .headerchannel .knowledgeWrap"
);
let exdknowledge = document.querySelector(
  ".topContainer .headerchannel .exdknowledge"
);
let exdItemknowledge = exdknowledge.querySelectorAll(".exdItem");

channelKnowledge.onmouseenter = function () {
  exdknowledge.style.display = "block";
  channelKnowledge.style.backgroundColor = "#e3e5e7";
};
knowledgeWrap.onmouseleave = function () {
  exdknowledge.style.display = "none";
  channelKnowledge.style.backgroundColor = "#f6f7f8";
};
for (var i = 0; i < exdItemknowledge.length; i++) {
  exdItemknowledge[i].onmouseenter = function () {
    this.style.backgroundColor = "#e3e5e7";
  };
  exdItemknowledge[i].onmouseleave = function () {
    this.style.backgroundColor = "#fff";
  };
}

// 中部导航：资讯
let channelInfo = document.getElementById("channelInfo");
let infoWrap = document.querySelector(".topContainer .headerchannel .infoWrap");
let exdinfo = document.querySelector(".topContainer .headerchannel .exdinfo");
let exdIteminfo = exdinfo.querySelectorAll(".exdItem");

channelInfo.onmouseenter = function () {
  exdinfo.style.display = "block";
  channelInfo.style.backgroundColor = "#e3e5e7";
};
infoWrap.onmouseleave = function () {
  exdinfo.style.display = "none";
  channelInfo.style.backgroundColor = "#f6f7f8";
};
for (var i = 0; i < exdIteminfo.length; i++) {
  exdIteminfo[i].onmouseenter = function () {
    this.style.backgroundColor = "#e3e5e7";
  };
  exdIteminfo[i].onmouseleave = function () {
    this.style.backgroundColor = "#fff";
  };
}

// 中部导航：生活
let channelLife = document.getElementById("channelLife");
let lifeWrap = document.querySelector(".topContainer .headerchannel .lifeWrap");
let exdlife = document.querySelector(".topContainer .headerchannel .exdlife");
let exdItemlife = exdlife.querySelectorAll(".exdItem");

channelLife.onmouseenter = function () {
  exdlife.style.display = "block";
  channelLife.style.backgroundColor = "#e3e5e7";
};
lifeWrap.onmouseleave = function () {
  exdlife.style.display = "none";
  channelLife.style.backgroundColor = "#f6f7f8";
};
for (var i = 0; i < exdItemlife.length; i++) {
  exdItemlife[i].onmouseenter = function () {
    this.style.backgroundColor = "#e3e5e7";
  };
  exdItemlife[i].onmouseleave = function () {
    this.style.backgroundColor = "#fff";
  };
}

// 中部导航：时尚
let channelFashion = document.getElementById("channelFashion");
let fashionWrap = document.querySelector(
  ".topContainer .headerchannel .fashionWrap"
);
let exdfashion = document.querySelector(
  ".topContainer .headerchannel .exdfashion"
);
let exdItemfashion = exdfashion.querySelectorAll(".exdItem");

channelFashion.onmouseenter = function () {
  exdfashion.style.display = "block";
  channelFashion.style.backgroundColor = "#e3e5e7";
};
fashionWrap.onmouseleave = function () {
  exdfashion.style.display = "none";
  channelFashion.style.backgroundColor = "#f6f7f8";
};
for (var i = 0; i < exdItemfashion.length; i++) {
  exdItemfashion[i].onmouseenter = function () {
    this.style.backgroundColor = "#e3e5e7";
  };
  exdItemfashion[i].onmouseleave = function () {
    this.style.backgroundColor = "#fff";
  };
}

// 中部导航：动物圈
let channelAnimal = document.getElementById("channelAnimal");
let animalWrap = document.querySelector(
  ".topContainer .headerchannel .animalWrap"
);
let exdanimal = document.querySelector(
  ".topContainer .headerchannel .exdanimal"
);
let exdItemanimal = exdanimal.querySelectorAll(".exdItem");

channelAnimal.onmouseenter = function () {
  exdanimal.style.display = "block";
  channelAnimal.style.backgroundColor = "#e3e5e7";
};
animalWrap.onmouseleave = function () {
  exdanimal.style.display = "none";
  channelAnimal.style.backgroundColor = "#f6f7f8";
};
for (var i = 0; i < exdItemanimal.length; i++) {
  exdItemanimal[i].onmouseenter = function () {
    this.style.backgroundColor = "#e3e5e7";
  };
  exdItemanimal[i].onmouseleave = function () {
    this.style.backgroundColor = "#fff";
  };
}

// 中部导航：更多
let channelMore = document.getElementById("channelMore");
let moresvg = document.getElementById("moresvg");
let moreWrap = document.querySelector(".topContainer .headerchannel .moreWrap");
let exdmore = document.querySelector(".topContainer .headerchannel .exdmore");
let exdItemmore = exdmore.querySelectorAll(".exdItem");

channelMore.onmouseenter = function () {
  exdmore.style.display = "block";
  moresvg.style.transform = "rotate(-180deg)";
  channelMore.style.backgroundColor = "#e3e5e7";
};
moreWrap.onmouseleave = function () {
  exdmore.style.display = "none";
  moresvg.style.transform = "rotate(-360deg)";
  channelMore.style.backgroundColor = "#f6f7f8";
};

for (var i = 0; i < exdItemmore.length; i++) {
  exdItemmore[i].onmouseenter = function () {
    this.style.backgroundColor = "#e3e5e7";
  };
  exdItemmore[i].onmouseleave = function () {
    this.style.backgroundColor = "#fff";
  };
}

// 中部导航：电影、电视剧、综艺、纪录片、vlog
let channelfilm = document.getElementById("channelfilm");
let channeldrama = document.getElementById("channeldrama");
let channelvariety = document.getElementById("channelvariety");
let channeldocumentary = document.getElementById("channeldocumentary");
let channelVLOG = document.getElementById("channelVLOG");

channelfilm.onmouseenter = function () {
  channelfilm.style.backgroundColor = "#e3e5e7";
};
channelfilm.onmouseleave = function () {
  channelfilm.style.backgroundColor = "#f6f7f8";
};

channeldrama.onmouseenter = function () {
  channeldrama.style.backgroundColor = "#e3e5e7";
};
channeldrama.onmouseleave = function () {
  channeldrama.style.backgroundColor = "#f6f7f8";
};

channelvariety.onmouseenter = function () {
  channelvariety.style.backgroundColor = "#e3e5e7";
};
channelvariety.onmouseleave = function () {
  channelvariety.style.backgroundColor = "#f6f7f8";
};

channeldocumentary.onmouseenter = function () {
  channeldocumentary.style.backgroundColor = "#e3e5e7";
};
channeldocumentary.onmouseleave = function () {
  channeldocumentary.style.backgroundColor = "#f6f7f8";
};

channelVLOG.onmouseenter = function () {
  channelVLOG.style.backgroundColor = "#e3e5e7";
};
channelVLOG.onmouseleave = function () {
  channelVLOG.style.backgroundColor = "#f6f7f8";
};

// 中部导航右侧隐藏盒子
let classroomWrap = document.getElementById("classroomWrap");
let classroom = document.getElementById("classroom");
let exdclassroom = document.getElementById("exdclassroom");

classroom.onmouseenter = function () {
  exdclassroom.style.display = "block";
};
classroomWrap.onmouseleave = function () {
  exdclassroom.style.display = "none";
};
let rightLiveWrap = document.getElementById("rightLiveWrap");
let rightlive = document.getElementById("rightlive");
let rightexdlive = document.getElementById("rightexdlive");

rightlive.onmouseenter = function () {
  rightexdlive.style.display = "block";
};
rightLiveWrap.onmouseleave = function () {
  rightexdlive.style.display = "none";
};
